<template>
  <div>
    <!--    卡片视图区域-->
    <el-card>
      <el-row>
        <!--查询条件表单区域-->
        <el-form :inline="true" label-position="left" :model="queryForm">
          <el-form-item v-model="queryForm.experimentName" label="课程及实验名称" size="small">
            <el-cascader ref="selectExperiment" size="small" style="width: 450px" :options="courseExperimentList"
                         :show-all-levels="true"></el-cascader>
          </el-form-item>
          <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
        </el-form>
      </el-row>
      <!--      <el-row :gutter="20">
              <el-col :span="8">
                <el-input placeholder="请输入内容">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-button type="primary">
                  搜索
                </el-button>
              </el-col>
            </el-row>-->
      <el-table
        :data="reportList"
        border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="username" label="姓名" width="180"></el-table-column>
        <el-table-column prop="stuId" label="学号" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="180">
          <template v-slot:default="scope">
            <div v-if="scope.row.status === '2'">
              <el-tag type="warning">待批阅</el-tag>
            </div>
            <div v-if="scope.row.status === '3'">
              <el-tag type="success">已批阅</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="reportTime" label="提交时间" width="180"></el-table-column>
        <el-table-column prop="reportScore" label="分数"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      queryForm: {
        courseName: '',
        experimentName: ''
      },
      courseExperimentList: [],
      reportList: []
    }
  },
  created () {
    this.getCourseExperimentList()
  },
  methods: {
    async getCourseExperimentList () {
      const { data: res } = await this.$http.post('/getExperiment')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) {
        this.$message.error('获取课程信息失败')
      } else {
        // console.log(res.data.courseExperiments)
        this.courseExperimentList = res.data.courseAndExperimentStr
        this.total = res.data.total
      }
    },
    async getReportListByExperId () {
      const { data: res } = await this.$http.post('/getReportListByExperId',
        { experId: this.$refs.selectExperiment.getCheckedNodes()[0].data.value })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取用户列表失败')
      this.reportList = res.data.reports
    },
    async onSubmit () {
      // console.log(this.$refs.selectExperiment.getCheckedNodes()[0].data.value)
      if (this.$refs.selectExperiment.getCheckedNodes()[0] === undefined) {
        this.$message.info('请先选择实验')
      } else {
        await this.getReportListByExperId()
        if (this.reportList.length > 0) {
          this.$message.success('获取报告信息成功')
        } else {
          this.$message.info('该实验暂无报告')
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
